<template>
   <div>
      <div class="shop-cart">
         <div class="left" @click="showFoodInfo">
            <div class="img">
               <img src="../../assets/shopcart/default.png" v-if="totalPrice == 0" />
               <img src="../../assets/shopcart/active.png" v-if="totalPrice" />
            </div>
            <div class="text">
               合计: {{totalPrice.toFixed(2)}}元
            </div>
         </div>
         <div class="right" :class="totalPrice == 0 ? '' : 'paymentActive'" @click="handlePayment">
            {{ totalPrice == 0 ? '添加食品' : '结算' }}
         </div>
      </div>

     
   </div>
</template>

<script>
   export default {
      props: {
         cartData: {
            type: Object,
            require: true,
            default: () => {},
         }
      },
      computed: {
         totalPrice() {
            let totalPrice = 0.0;
            if (this.cartData.shopCart.length != 0) {
               totalPrice = this.cartData.shopCart.reduce((pre, cur) => pre + (cur.price * cur.num), 0.0)
            }
            return totalPrice
         }
      },
      methods: {
         handlePayment() {
            // console.log(this.cartData)
            // 向父组件发射 结算 事件
            if(this.totalPrice != 0)
               this.$emit('handlePayment',this.totalPrice)
         },

         //查看购物车
         showFoodInfo() {
            // 向父组件发射 展示 食品信息事件
				this.$emit('showFoodInfo')
         }
      }
   }
</script>

<style scoped>
   .shop-cart {
      display: flex;
      justify-content: space-between;
      padding-left: 20px;
      height: 50px;
      line-height: 50px;
      background-color: #fff;

   }

   .left {
      display: flex;
      width: 70%;
      /* background-color: yellow; */
   }

   .left .img {
      position: absolute;
      top: -20px;


   }

   .left .img img {
      width: 40px;
      height: 70px;
   }

   .left .text {
      margin-left: 60px;
   }


   .right {
      flex: 1;
      text-align: center;
      background-color: gray;
   }

   .paymentActive {
      background-color: #ffbe11;
   }
</style>